<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <input type="button" value="btn" id="btn">
    <div id="app">
        <pre v-pre class="note">
        v-on事件绑定时使用的 methods 中方法的this ,被vue通过 call 函数完成了this的锁定；
        methods方法仓库中定义的方法，通过this可以直接方法到挂载后的vue实例；
        通过vue实例可以直接访问vue实例上的所有属性和方法；
        而vue的数据仓库变量和方法仓库方法在vue实例构建时，会被直接定义在实例的根属性上；
        ==> 仓库中的属性名称不可以重复
        ==> methods 中定义的方法取值不可以是箭头函数
        ==> methods 中定义的方法内部的嵌套方法如果需要保持this为当前vue实例，建议使用箭头函数
        </pre>
        <input type="button" value="printThis" @click="printThis()">
    </div>
    <script type="module">
        // es6的模块环境默认启动严格语法模式
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        const app = createApp({
            data(){
                return {
                   msg:"msg变量"
                }
            },
            methods:{
                // msg:function(){},
                printThis(){
                    console.log(this)
                    // let that = this;
                    // setTimeout(function(){
                    //     console.log(that.msg)
                    // }, 3000);
                    setTimeout(()=>{
                        console.log(this.msg)
                    }, 3000);
                }
                // printThis:()=>{
                //     console.log(this)
                // }
            }
        });
        
        const vm = app.mount("#app");
        console.log(vm)
    </script>
</body>
</html>